.float-L { float: left;}
.float-R { float: right;}
.bgfff {.bg(@color-white100);}
.bgF6F7F8 { .bg(#F6F7F8);}
.word_ellipsis { .content-ellipsis;}
.noMargin { .m(0) !important;}
.curPointer { cursor: pointer;}
.p20 { .p(20);}
.pb20 { .pb(20);}
.pr20 { .pr(20);}
.pt20 { .pt(20);}
.px20 { .px(20);}
.py20 { .py(20);}
.p16 { .p(16);}
.pl16 { .pl(16);}
.px16 { .px(16);}
.py16 { .py(16);}
.pb16 { .pb(16);}
.pt16 { .pt(16);}
.px8 { .px(8);}
.w-90 { width: 90% !important; box-sizing: border-box;}
.w-100 { width: 100% !important; box-sizing: border-box;}
.spanLink { color: @color-1D70F5; cursor: pointer;}
.spanLink:hover { text-decoration: underline;}
.textRight { text-align: right;}
.textCenter { text-align: center;}
.verticalAlignMiddle { vertical-align: middle;}
.a12 { .fontS-Base; color: @color-1D70F5 !important;}
.bgBaoImg { background-image: url(../img/bao.png); background-repeat: no-repeat; background-position: right center;}
.bgLogoImg {background-image: url(../img/logoBg.png); background-repeat: no-repeat; background-position: right bottom;}
// 仪表盘故障定位区的告警背景色
.bj-urgent { .bg(@cA-urgent);}
.bj-serious { .bg(@cA-serious);}
.bj-error {.bg(@cA-error);}
.bj-tips {.bg(@cA-tips);}
.bj-health { .bg(@cA-health);}
.bj-info { .bg(@cA-gray);}
// 告警公用颜色样式
.color-urgent {color: @cA-urgent;}
.color-serious {color: @cA-serious;}
.color-error {color: @cA-error;}
.color-tips {color: @cA-tips;}
.color-health {color: @cA-health;}
.ui-WH100 { width: 100%; height: 100%; box-sizing: border-box;}
.borRadius4 { border-radius: 4px;}
.p0 { .p(0);}
.hideD3GDom { display: none;}
// ==========================================布局方面====================================================== //
// ----------------------------------------菜单相关
.setScrollbar { width: 100%; height: 100%; overflow: hidden !important;
  .el-scrollbar__bar.is-horizontal { display: none !important;}
}
.mainMenu {
  li.el-menu-item {height:46px !important; line-height: 46px !important; .pl(16) !important; .fontS-Medium !important; font-weight: 400;
    [class^=el-icon-] { width: 16px !important; .fontS-Medium !important; color: @color-555555 !important;}
  }
  li.el-menu-item.is-active, li.el-menu-item.is-active:hover { .pl(8) !important; border-left:8px @color-1D70F5 solid; .bg(rgba(29, 112, 245, 0.1)) !important;
    [class^=el-icon-] {color: @color-1D70F5 !important;}
  }
  li.el-menu-item:hover {.bg(rgba(29, 112, 245, 0.1)) !important; color: @color-1D70F5 !important;
    [class^=el-icon-] {color: @color-1D70F5 !important;}
  }
  // 第一层有子菜单
  li.el-submenu {
    .el-submenu__title {height:46px !important; line-height: 46px !important;.px(16) !important; .fontS-Medium !important; font-weight: 400;
      [class^=el-icon-] { width: 16px !important; .fontS-Medium !important; color: @color-555555 !important;}
    }
    .el-submenu__title:hover {.bg(rgba(29, 112, 245, 0.1)) !important; color: @color-1D70F5 !important;
      [class^=el-icon-] {color: @color-1D70F5 !important;}
    }
    .el-menu {
      .el-menu-item { height:46px !important; line-height: 46px !important; .pl(40) !important; font-weight: 400;}
      .el-menu-item.is-active, .el-menu-item.is-active:hover {.pl(32) !important; border-left:8px @color-1D70F5 solid; .bg(rgba(29, 112, 245, 0.1)) !important;}
      .el-submenu {
        .el-submenu__title {height:42px !important; line-height: 46px !important;.pl(40) !important;.pr(16) !important; .fontS-Medium !important; font-weight: 400;}
        .el-menu {
          .el-menu-item { height:46px !important; line-height: 46px !important; .pl(55) !important; font-weight: 400;}
          .el-menu-item.is-active, .el-menu-item.is-active:hover {.pl(47) !important; border-left:8px @color-1D70F5 solid; .bg(rgba(29, 112, 245, 0.1)) !important;}
        }
      }
    }
  }
  // 分组
  .el-menu-item-group {
    .el-menu-item-group__title { color: @color-555555 !important; .fontS-Base !important; height:46px; box-sizing: border-box; .py(0) !important; .px(18); line-height: 46px;}
  }
}
.mainMenu.el-menu { border-right: none !important;}
.mainMenu.el-menu--collapse {
  li.el-menu-item {
    .el-tooltip { .pl(20) !important;
      i {color: @color-555555 !important;}
    }
  }
  .el-submenu {
    .el-submenu__title { .px(20) !important;}
  }
  .el-submenu__title i { color: @color-555555 !important;}
  .el-submenu__title:hover { .bg(rgba(29, 112, 245, 0.1)) !important; color: @color-1D70F5 !important;
    i {color: @color-1D70F5 !important;}
  }
  .el-menu-item.is-active {
    .el-tooltip { .pl(12) !important;
      i {color: @color-1D70F5 !important;}
    }
  }
  .is-active {
    .el-submenu__title {.pl(12) !important; border-left:8px @color-1D70F5 solid; .bg(rgba(29, 112, 245, 0.1)) !important;
      [class^=el-icon-] { color: @color-1D70F5 !important;}
    }
  }
}
.el-menu--vertical.submenuOne { left: 56px !important;}
.el-menu--vertical.submenuOne, .el-menu--vertical.submenuTwo { border-radius: 0px 8px 8px 0px; box-shadow: 2px 2px 10px 0px rgba(16,21,47,0.12); overflow: hidden;
  .el-menu--popup-right-start { .mx(0) !important; .py(10) !important;
    .el-menu-item { .py(0) !important; height: 46px !important; line-height: 46px !important; .font-16;  font-weight: 400;}
    .el-menu-item:hover, .el-menu-item.is-active { .bg(rgba(29, 112, 245, 0.1)) !important; color: @color-1D70F5 !important;}
    .el-submenu {
      .el-submenu__title { .py(0) !important; height: 46px !important; line-height: 46px !important; .font-16; font-weight: 400;}
    }
    .el-submenu:hover, .el-submenu.is-active { .bg(rgba(29, 112, 245, 0.1)) !important;
      .el-submenu__title { color: @color-1D70F5 !important;}
    }
  }
}

.mainP0 { .p(0) !important;}
// 内容区域-路径部分
.el-main {
  .mainHeader {
    .mainPathBox {
      .el-breadcrumb {
        .el-breadcrumb__item.lashItem {
          .el-breadcrumb__inner { color: @color-1D70F5 !important;}
        }
        .el-breadcrumb__item.noLastItem {
          .el-breadcrumb__separator { display: inline-block !important;}
        }
        .oneDiv { float: left; position: relative; z-index: 0;
          .positionItem { float: left; position: absolute; z-index: 0; right: 0px; top: 20px;}
        }
        .TwoDiv { float: left; padding-top: 10px;}
        .TwoDiv.noPd { padding-top: 0px;}
      }
    }
  }
}
// 内容部分布局
.mainBox-0 { width: 100%; height: 100%; box-sizing: border-box; .px(16); .pb(16); overflow: hidden;
  .mainDiv {  width: 100%; height: 100%; box-sizing: border-box; .p(20); overflow: hidden; border-radius: 4px; overflow-y: auto; .bgfff;
    .searchDiv { width: 100%; overflow: hidden;
      .buttonDev-b { text-align: center; height: 32px;
        .showButton { .spanLink; .float-L; .fontS-Base; line-height: 32px;}
      }
    }
    // 业务画像
    .ListDivH125 {height: calc(100% - 125px);}
    // 三行的搜索区域高度
    .ListDivH210 {height: calc(100% - 211px);}
    // 两行的搜索区域高度
    .ListDivH157 {height: calc(100% - 158px);}
    // 超过一行的搜索区域高度
    .ListDivH105 {height: calc(100% - 105px);}
    // 只有一行的搜索区域高度
    .ListDivH53 {height: calc(100% - 53px);}
    .ListDivH {height: 100%;}
    .ListDiv { overflow: hidden;
      .contentDiv { width: 100%; height: 100%; overflow: hidden;
        .contentDiv-header { .pb(16); overflow: hidden;
          div.title { .float-L; line-height: 32px; height: 32px;
            span { .float-L; }
            .bor { display: inline-block; width: 4px; height: 16px; .bg(@color-1D70F5); .mr(12); .mt(7);}
            .text {.fontS-Medium; color: @color-222222; font-weight: 500;}
          }
          div.right {.float-R;}
        }
        .contentDiv-table { width: 100%; height: calc(100% - 48px); overflow: hidden;}
        .contentDiv-tableAuto { width: 100%; height: calc(100% - 48px); overflow: hidden; overflow-y: auto;}
      }
    }
  }
}
// 移动终端管理内容部分布局
.mtmMainBox { width: 100%; height: 100%; box-sizing: border-box; .px(16); .pb(16); overflow: hidden;
  .mainDiv {width: 100%; height: 100%; box-sizing: border-box; .py(20); overflow: hidden; border-radius: 4px; overflow-y: auto; .bgfff;
    .searchDiv { width: 100%; .px(20); box-sizing: border-box; overflow: hidden;
      .buttonDev-b { text-align: center; height: 32px;
        .showButton { .spanLink; .float-L; .fontS-Base; line-height: 32px;}
      }
    }
    .ListDiv {
      .contentDiv { width: 100%;
        .contentDiv-header { .pb(16); .px(20); overflow: hidden;
          div.title { .float-L; line-height: 32px; height: 32px;
            span { .float-L; }
            .bor { display: inline-block; width: 4px; height: 16px; .bg(@color-1D70F5); .mr(12); .mt(7);}
            .text {.fontS-Medium; color: @color-222222; font-weight: 500;}
          }
          div.right {.float-R;}
        }
        .contentDiv-table { width: 100%; height: calc(100% - 48px); overflow: hidden;}
        .contentDiv-tableAuto { width: 100%; height: calc(100% - 48px); overflow: hidden; overflow-y: auto;}
      }
    }
  }
}
// 表格与分页布局样式
.tableBox { display: flex; flex: 1; flex-direction: column; height: 100%; overflow: hidden; box-sizing: border-box;
  .tableContent {display: flex; flex: 1; height: 100%; overflow: hidden;}
  .tablePage {.pt(20);
    .left {.float-L;}
    .page {.float-R;
      .elPagination { .p(0) !important; .fontS-ExtraSmall !important; color: @color-555555 !important; font-weight: 400 !important;}
    }
  }
}
// 带竖线的标题
.titleBox { width: 100%; height: 100%; display: flex;
  .title { display: block; flex: 1; width: 100%; box-sizing: border-box; .pr(10); height:32px; overflow: hidden;
    .splitFont { float: left; width: 4px; height:16px; border-radius: 2px; .bg(@color-1D70F5); .mt(8);}
    .text { float: left; .fontS-Medium; color: @color-222222; width: calc(100% - 4px); box-sizing: border-box; .pl(8); line-height: 32px; overflow: hidden;text-overflow:ellipsis; white-space:nowrap;}
  }
  .FloatR { float: right;}
}
// 美化滚动条-------//
.boxScrollbar::-webkit-scrollbar-track-piece {background-color:#efefef;}
.boxScrollbar::-webkit-scrollbar {width:8px;height:8px;}
.boxScrollbar::-webkit-scrollbar-thumb {background-color:#dddddd;background-clip:padding-box; border-radius: 4px;}
.boxScrollbar::-webkit-scrollbar-thumb:hover {background-color:#bbb;}
// 按钮区域样式调整----//
.el-button+.el-button { margin-left:3px !important;}
// 按钮风格
.el-button.buttonMl15 { .ml(15) !important;}
.el-button.buttonMr15 { .mr(15) !important;}
.el-button.buttonMr10 { .mr(10) !important;}
.el-button.buttonMl8 { .ml(8) !important;}
.el-button.buttonMr8 { .mr(8) !important;}
.el-button.buttonPx10 { .px(10) !important;}
.nomalButton, .plainButton { .fontS-Base !important; border-radius: 4px !important;}
.buttonPx30 { .px(30) !important;}
.buttonPx20 { .px(20) !important;}
.el-button--small { .py(8) !important;}
.el-button--mini { .py(7) !important; .px(15) !important;}
// 主按钮
.el-button--primary { .bg(@color-1D70F5) !important; border-color:@color-1D70F5 !important;}
.el-button--primary:hover { .bg(@color-91BFFF) !important; border-color:@color-91BFFF !important;}
// 次按钮
.el-button--default.is-plain { .bg(@color-white100) !important; border-color:@color-999999 !important; color: @color-555555 !important;}
.el-button--default.is-plain:hover { border-color:@color-1D70F5 !important; color: @color-1D70F5 !important;}
.el-button.buttonBorColorCCC { border-color: @color-cccccc !important;}
.el-button.buttonActive { .bg(@color-1D70F5) !important; border-color:@color-1D70F5 !important; color: @color-white100 !important;}
.el-button.buttonActive:hover { color: @color-white100 !important; .bg(@color-91BFFF) !important; border-color:@color-91BFFF !important;}
// 交易跟踪的图标按钮
.el-button.Search-tags-move { width: 28px; height: 28px; .p(0) !important; border-radius: 4px !important;}
// 圆形的按钮图标调整padding
.circleIconP4 { padding:4px !important;}
.circleIconP5 { padding:5px !important;}
.circleIconP2 { .p(2) !important;}
.circleIconP1 { .p(1) !important;}
.el-button.circleIconPlain { .bg(@color-white100) !important; border-color:#DCDFE6 !important; color: @color-555555 !important;}
.el-button.circleIconPlain:hover { border-color:@color-1D70F5 !important; color: @color-1D70F5 !important;}
.el-button.is-disabled, .el-button.is-disabled:hover { .bg(@color-white100) !important; border-color:@color-E6E6E6 !important; color: @color-cccccc !important;}
.nomalButton.is-disabled, .nomalButton.is-disabled:hover { .bg(#a0cfff) !important; border-color:#a0cfff !important; color: #FFF !important;}
// 表单样式调整
.el-form-item__label { color: @color-222222 !important; .fontS-Base !important;}
.el-input__inner, .el-range-editor--small .el-range-input { color: @color-555555 !important; .fontS-Base !important;}
// 登录页面，特殊高度表单
.inputMediumH46.el-input--medium .el-input__inner { height: 46px !important; line-height: 46px !important;}
.inputMediumH46.el-input--medium .el-input__icon { .font-18 !important; width: 18px !important; line-height: 46px !important;}
.inputMediumH46.el-input--prefix .el-input__inner { padding-left: 50px !important;}
.inputMediumH46 .el-input__prefix { left: 16px !important;}
.inputMediumH46 .el-input__suffix { right: 16px !important;}
.buttonMediumH46 { .font-18 !important; height: 46px;}
.errorInputBor .el-input__inner { border-color: @color-Error !important;}
.checkboxM0 { margin: 0px !important;}
// 单选框的风格
.radioColor1D70F5 {
  .el-radio__inner { border-color: @color-cccccc !important;}
  .el-radio__label { color: @color-555555 !important;}
}
.radioColor1D70F5.is-checked {
  .el-radio__inner { .bg(@color-1D70F5) !important; border-color: @color-1D70F5 !important;}
  .el-radio__label { color: @color-1D70F5 !important;}
}
// 复选框的风格
.checkboxColor1D70F5 {
  .el-checkbox__inner { border-color: @color-cccccc !important;}
  .el-checkbox__label { color: @color-555555 !important;}
}
.checkboxColor1D70F5.is-checked {
  .el-checkbox__inner { .bg(@color-1D70F5) !important; border-color: @color-1D70F5 !important;}
  .el-checkbox__label { color: @color-1D70F5 !important;}
} 

// 表格------------------------------------------------------------------------------------------//
// 暂无信息样式
.emptyDiv { width: 100%; height: 100%;
  div { .pt(30); height: 100%; box-sizing: border-box;
    span { display: block;}
    span.img { height: 50%; background-image: url('../img/empty.png'); background-repeat: no-repeat; background-position: center center; background-size: auto 100%;}
    span.text { text-align: center; height: 24px; line-height: 24px;.fontS-Base; color: @color-555555;}
  }
}
// 列表中的表格
.elTableClass {
  .tableHeaderRowClass {
    th {.bg(#EEF0F5); .py(13) !important;
      .cell { line-height: 24px !important; color: @color-555555; .fontS-Base;
        .caret-wrapper { height: 20px !important;
          .sort-caret.ascending { top: -1px !important;}
          .sort-caret.descending { bottom: -1px !important;}
        }
        .el-table__column-filter-trigger { line-height: 24px !important;}
      }
    }
    th.is-leaf { border-bottom: none !important;}
    th.gutter { height: 50px;}
  }
  .tableRowClass {
    td { border:none !important; .py(13) !important;
      .cell { line-height: 24px !important; color: @color-555555; .fontS-Base; width: auto !important;}
    }
  }
  tr {
    td.el-table__expanded-cell { border-bottom: none !important; .p(20) !important; border-top: 1px @color-E6E6E6 dashed !important;}
  }
  .el-table__empty-text {.emptyDiv;}
  .el-table__body-wrapper::-webkit-scrollbar-track-piece {background-color:#efefef;}
  .el-table__body-wrapper::-webkit-scrollbar {width:8px;height:8px;}
  .el-table__body-wrapper::-webkit-scrollbar-thumb {background-color:#dddddd;background-clip:padding-box; border-radius: 4px;}
  .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {background-color:#bbb;}
  .el-table__body-wrapper::-webkit-scrollbar-corner { background: transparent !important;}
  .el-table--scrollable-y {
    th.gutter:last-of-type { display: block !important;}
  }
  .el-table__empty-block {align-items:inherit !important;}
  .el-checkbox.is-checked .el-checkbox__inner, .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner { .bg(@color-1D70F5) !important; border-color: @color-1D70F5 !important;}
  .el-table__fixed { height: 100% !important;}
  .el-table__fixed::before { height: 0px !important;}
  .el-table__body-wrapper { height: calc(100% - 50px) !important;}
  .tableRowBorClass {
    td { border-right: 1px @color-E6E6E6 solid !important; .py(13) !important;
      .cell { line-height: 24px !important; color: @color-555555; .fontS-Base; width: auto !important;}
    }
  }
}
// 带边框的表格
.elTableClass.el-table--mini .tableHeaderRowClass { border-top:1px @color-E6E6E6 solid !important; border-bottom: 1px @color-E6E6E6 solid !important;}
.elTableClass.el-table--mini .tableHeaderRowClass th { .py(5) !important;}
.elTableClass.el-table--mini .tableHeaderRowClass th.gutter { height: 34px !important;}
.elTableClass.el-table--mini .tableRowClass td { .py(5) !important;}
.elTableClass.el-table--border { border-bottom: 1px @color-E6E6E6 solid !important;}
.elTableClass.el-table--border .tableRowClass td { border-top: 1px @color-E6E6E6 solid !important;}
.elTableClass.el-table--border .tableRowClass:first-child td { border-top: none !important;}
.el-table--border, .el-table--group { border-color: @color-E6E6E6 !important;}
.elTableClass .tableRowBorClass:hover td { background: none !important;}

.elTableClass.el-table::before { height: 0px !important;}
.disableSelection .cell { display: none !important;}
.cellInputHide .el-checkbox__input { display: none;}
// 基本信息展示风格
.descrTableDiv { width: 100%; .bg(#EEF0F5); .px(10); .py(12); box-sizing: border-box;
  table { table-layout: fixed; width: 100%;
    td { .fontS-Base; color: @color-222222; text-align: left; line-height: 20px; .py(8); .px(10); word-wrap:break-word; word-break:break-all;}
    td.L { text-align: right; color: @color-999999;}
  }
}
// 基本信息展示风格左右颜色不同的风格
.infoTableDiv {
  table { table-layout: fixed; width: 100%; border-collapse: inherit !important; border-spacing: inherit !important;
    tr:first-of-type {
      td {border-top:1px @color-E6E6E6 solid;}
    }
    tr {
      td:first-of-type {border-left:1px @color-E6E6E6 solid;}
      td { .fontS-Base; color: @color-222222; text-align: left; border-bottom:1px @color-E6E6E6 solid; border-right:1px @color-E6E6E6 solid; .px(10); word-wrap:break-word; word-break:break-all; vertical-align: top;
        .cell { float: left; width: 100%; line-height: 24px; overflow: hidden; .py(5);
          .img { float: left; width: 20px; overflow: hidden; margin-top: 2px;}
          .text { float: left; width: calc(100% - 20px); overflow: hidden; box-sizing: border-box; padding-left:5px; text-overflow: ellipsis; white-space: nowrap;}
          .elProgressLineH { line-height:inherit !important;}
          .wordBreak { word-break: break-word;}
          .textOverEllipsis { display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        }
      }
      td.L { .bg(@c-fa);
        .cell { text-align: right; color: @color-999999;}
      }
    }
    tr.noTBor {
      td { border-top: none;}
    }
    tr.noBBor {
      td { border-bottom: none;}
    }
  }
}

.el-table-filter__wrap.el-scrollbar__wrap {
  .el-scrollbar__view { .pb(17);}
}
// 分页样式 --------------------------------------------------------//
.elPagination {
  .el-pagination__sizes { .mr(5) !important;}
  .el-pagination__jump { .ml(0) !important; color: @color-555555 !important;
    .el-pagination__editor.el-input { .mx(5);}
  }
  .el-pagination__total { .mr(8);}
  .el-pager {
    li.active { .bg(@color-1D70F5) !important; border-color: @color-1D70F5 !important;}
  }
}
.elPagination.el-pagination.is-background .btn-next, .elPagination.el-pagination.is-background .btn-prev, .elPagination.el-pagination.is-background .el-pager li {
  background: none !important; border:1px @cBor-Level1 solid; border-radius: 4px;
}
.elPagination.el-pagination.is-background .el-pager li.active { .bg(@c-1E60CC) !important; border-color: @c-1E60CC;}
.elPagination.el-pagination.is-background .el-pager li:hover { color: @c-1E60CC !important;}
.elPagination.el-pagination.is-background .el-pager li.active:hover { color: @c-white !important;}

// 穿梭框样式修改
.elTransfer { .px(20);
  .el-transfer-panel {
    .el-transfer-panel__footer { text-align: center;}
  }
  .el-transfer-panel:first-child {
    .el-transfer-panel__body,.el-transfer-panel__list {height:286px;}
  }
}
// 卡片---------------------------------------------------------------------------------------//
.cardAlwaysBox {background: #FFFFFF; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05) !important; border-radius: 4px !important; border:none !important;
  .el-card__header { .pb(0) !important; border-bottom: none !important; .pt(12) !important; line-height: 32px;}
  .el-card__body {.pt(8) !important; .px(0) !important;
    .chartBox { width: 100%; height: 100%; box-sizing: border-box; .px(20);}
  }
}
// 业务视图-滑动层详情：指标配置、多维配置
.cardNPadding {.fontS-Base;
  .el-card__header { padding:0px !important;}
  .Header {
    height:40px; line-height: 40px; .bg(@c-fa); .px(10);
    .FloatL { float: left;}
    .FloatR { float: right;}
  }
  .Content {
    .ContentForm { .p(16);}
  }
  .el-card__body { padding:0px !important;}
} 
// Tabs 标签页
.el-tabs--border-card>.el-tabs__header { background-color:@c-fa !important; border-bottom:1px #ebeef5 solid !important;}
.el-tabs--border-card { box-shadow:none !important; border:1px #ebeef5 solid !important;}
.el-tabs--border-card>.el-tabs__content { padding:15px 0px 15px 0px !important;}
// 时间线---------------------------------------------------------------------------------------//
.tagHide { display: inline-block; max-width: 100%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
.timeLineNomal { padding-left:110px !important;
  .el-timeline-item { .pb(0); border-left:1px solid @c-ccc;}
  .el-timeline-item__wrapper { padding-left:20px !important;}
  .el-timeline-item__node {top: 36px;}
  .el-timeline-item__tail { border:none !important;}
  .el-timeline-item__node--normal { width: 12px !important; height:12px !important; left:-8px !important; .p(2);
    i { .fontS-ExtraSmall;}
  }
}
.timeLineMini { padding-left:85px !important; .py(0);
  .el-timeline-item { .pb(0); border-left:1px solid @c-ccc;}
  .el-timeline-item__wrapper { padding-left:15px !important;}
  .el-timeline-item__node {top: 18px;}
  .el-timeline-item__tail { border:none !important;}
  .el-timeline-item__node--normal { width: 12px !important; height:12px !important; left:-8px !important; .p(2);
    i { .fontS-ExtraSmall;}
  }
}
// 设置所有的tooltip最大宽度为250
.el-tooltip__popper { max-width: 250px !important; line-height: 20px !important;}
.popperW200 { width: 180px !important; word-break: break-all;}
.popperMinWidth100 { min-width: 100px !important;}
.popperW350 { min-width: 180px !important; max-width: 350px !important; word-break: break-all;}
.popperW650 { min-width: 180px !important; max-width: 650px !important; word-break: break-all;}
// popover 弹出框
.el-popover {
  .eTagTitle { .fontS-Base; color: @color-555555;}
  .eTag { .mr(5); .mt(5); .fontS-Base !important; color: @color-999999 !important;}
}
// 列表中的弹出框
.popoverAutoScroll {
  .el-popover__title { box-sizing: border-box; .px(10);}
  .popoverContent { width: 100%; .px(10); box-sizing: border-box; overflow: hidden; overflow-y: auto; max-height: 190px;}
}
// el-tag 标签
.elTagClass.el-tag--plain.el-tag--info { color: @color-555555 !important; border-color: @color-cccccc !important;}
// 弹窗--------------------------------------------------------------------------------------------//
.elDialogBox { border-radius: 4px; overflow: hidden;
  .el-dialog__header { .px(20) !important; .py(13) !important;  border:1px @color-E6E6E6 solid;
    .el-dialog__title { .fontS-Medium !important; color: @color-222222 !important;}
  }
  .el-dialog__body { .py(20) !important; .px(0) !important;}
  .el-dialog__footer { .bg(@color-white100) !important; border-top: none !important; text-align: center;}
}
// 配置滑动层样式--------------------------------------------------------------------------------------------//
.elDrawerSetBox {
  .setHeader {
    height: 55px; .bb(1,@color-E6E6E6,solid); padding:15px 20px 0px 20px; box-sizing: border-box; overflow: hidden;
    .Title { float: left; line-height: 24px; .fontS-Medium; color: @color-222222;}
    .Close { float: right; cursor: pointer; line-height: 24px;}
    .Close:hover {
      i { color: @color-1D70F5;}
    }
  }
  .setContent {
    height:calc(100vh - 118px); overflow: hidden; overflow-y: auto;
  }
  .setContentNoFooter { height:calc(100vh - 55px);}
  .setFooter {
    height:61px; box-sizing: border-box; overflow: hidden; .bt(1,@color-E6E6E6,solid); padding:15px 20px 0px 20px; text-align: right;
  }
}
// 详情滑动层样式--------------------------------------------------------------------------------------------//
.elDrawerDescrBox {
  .elDrawerDescrDiv { height: 100vh;
    .pageHeader { .px(20); .py(15); .bb(1,@color-E6E6E6,solid);
      .el-page-header__left {
        .el-page-header__title { min-width: 30px;}
      }
      .el-page-header__content { width: 100%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
        .pageHeaderContent {
          float: left; width: 100%;
          .text { float: left; .fontS-large; color: @cText-Main; width: calc(100% - 10px); overflow: hidden; text-overflow:ellipsis; white-space: nowrap; box-sizing: border-box;}
        }
      }
    }
  }
  .elDrawerDescrContent { color: @color-555555; .fontS-Base; height: calc(100vh - 55px); .p(20); box-sizing: border-box; overflow: hidden; overflow-y: auto;}
  .elDrawerDescrContent.pt16 { .pt(16);}
  .elDrawerDescrChartBox { height: calc(100vh - 55px); box-sizing: border-box; overflow: hidden; overflow-y: auto; .bgF6F7F8;}
}
// elBadge告警相关
.elBadge {
  .el-badge__content.is-fixed { right:0px; top: 5px;}
}
.item-urgent, .item-urgent .el-badge__content.is-fixed { .bg(@cA-urgent);}
.item-serious, .item-serious .el-badge__content.is-fixed { .bg(@cA-serious);}
.item-error, .item-error .el-badge__content.is-fixed { .bg(@cA-error);}
.item-tips, .item-tips .el-badge__content.is-fixed { .bg(@cA-tips);}
.item-success, .item-success .el-badge__content.is-fixed { .bg(@c-Success);}
.item-all, .item-all .el-badge__content.is-fixed { .bg(@c-Info);}
// UI 树形控件
.elTreeBox {
  .el-checkbox__input.is-checked {
    .el-checkbox__inner { .bg(@color-1D70F5) !important; border-color: @color-1D70F5 !important;}
  }
}
// -----------------------------------------------------------------------------/
// flex 布局排版
.flex-h { -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.flex-h, .flex-v { display: -webkit-box; display: -ms-flexbox; display: flex;}
.flex-v { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.flex-justify { justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify;}
// 调用链性能剖析滑动层使用到的布局样式
.apmMain { height: 100%;}
.apmMain { display: flex; flex: 1; flex-direction: column; justify-content: space-between; overflow: hidden;}
.apmCenter { display: flex; flex: 1; height: 100%; overflow: hidden;}
.ui-flexBox { display: flex; flex: 1; flex-direction: column; height: 100%; overflow: hidden; box-sizing: border-box;
  .ui-flexContent {display: flex; flex: 1; height: 100%; overflow: hidden; box-sizing: border-box;}
  .ui-pages { height:32px; overflow: hidden; text-align: right; .pt(0);}
}
.ui-overflowAuto { height: 100%; overflow: hidden; overflow-y: auto; width: 100%; box-sizing: border-box;}

// 新开窗口框体内容部分公用样式
.targetLayoutBox { width: 100%; display: flex; flex: 1; flex-direction: column; /*height: calc(100vh - 104px);*/ height: 100%; overflow: hidden; box-sizing: border-box;
  .targetLayoutHeader {.px(16); border-left: 1px @color-EFEFEF solid; .bg(@color-white100);}
  .targetLayoutCenter { flex: 1; width: 100%; height: 100%; overflow: hidden; .p(16); .pt(0); .bg(#F6F7F8); box-sizing: border-box; overflow: hidden;
    .mainDiv { width: 100%; height: 100%; box-sizing: border-box; .p(20); overflow: hidden; border-radius: 4px; overflow-y: auto; .bg(@color-white100);
      .searchDiv { width: 100%; overflow: hidden;
        .buttonDev-b { text-align: center; height: 32px;
          .showButton { .spanLink; .float-L; .fontS-Base; line-height: 32px;}
        }
      }
      // 两行的搜索区域高度
      .ListDivH157 {height: calc(100% - 158px);}
      // 超过一行的搜索区域高度
      .ListDivH105 {height: calc(100% - 105px);}
      // 只有一行的搜索区域高度
      .ListDivH53 {height: calc(100% - 53px);}
      .ListDivH {height: 100%;}
      .ListDiv { overflow: hidden;
        .contentDiv { width: 100%; height: 100%; overflow: hidden;
          .contentDiv-header { .pb(16); overflow: hidden;
            div.title { .float-L; line-height: 32px; height: 32px;
              span { .float-L; }
              .bor { display: inline-block; width: 4px; height: 16px; .bg(@color-1D70F5); .mr(12); .mt(7);}
              .text {.fontS-Medium; color: @color-222222; font-weight: 500;}
            }
            // 告警级别对应的个数
            div.eventDiv {.float-L;
              ul {
                li {.float-L; .pl(20);
                  .itemBj { float: left; width: 10px; height: 10px; overflow: hidden; border-radius: 1px; .mt(11); .mr(10);}
                  .text { .fontS-ExtraSmall; color: @color-555555; line-height: 32px;
                    font { font-weight: bold;}
                  }
                }
              }
            }
            div.right {.float-R;}
          }
          .contentDiv-table { width: 100%; height: calc(100% - 48px); overflow: hidden;}
          .contentDiv-tableAuto { width: 100%; height: calc(100% - 48px); overflow: hidden; overflow-y: auto;}
        }
      }
    }
  }
}
// 元数据详情-新开窗口框体内容部分公用样式-性能分析
.metaTargetPerfLayout { float:left; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; .p(16); .pt(0); .bg(#F6F7F8);
  .centerMain { width: 100%; height: 100%; overflow: hidden; display: flex; flex: 1; flex-direction: row;
    .centerMain-L { height: 100%; width: 280px; box-sizing: border-box; overflow: hidden;}
    .centerMain-R { width: 100%; height: 100%; .pl(16); box-sizing: border-box; overflow: hidden;
      .centerMainContent { width: 100%; height: 100%; border-radius: 4px; .py(20); .pl(20); box-sizing: border-box; overflow: hidden; .bg(@color-white100);
        .centerMainContentBox { width: 100%; height: 100%; .pr(20); box-sizing: border-box; overflow: hidden; overflow-y: auto;}
      }
    }
  }
}
// 下列框bug修改----------------------------------------------------------------------------------------------------------//
.el-scrollbar__wrap { overflow-x: hidden !important;}
.el-select-dropdown__list { .pb(22) !important;}
.el-autocomplete-suggestion__list { .pb(15) !important;}
.el-dropdown-menu .el-dropdown-menu__item:hover {color: @color-1D70F5 !important;}
// 下拉选择给与最大宽度
.popperSelect250 { max-width: 250px !important;}
// 交易结果的三种状态图标颜色-----------------------------------------------------------------------------------------//
.elIconStartOn { color: @c-Warning;}
.elIconStartOff { color: @c-Info;}

.Icon-cSuccess { color: @c-Success;}
.Icon-cDanger { color: @c-Danger;}
.Icon-cWarning { color: @c-Warning;}
.Icon-cInfo { color: @c-Info;}
.Icon-cSuccess,.Icon-cDanger,.Icon-cWarning,.Icon-cInfo,.font14 { .fontS-Base;}

// 设备列表可用性图标颜色
.elIconColor0 { color: #85B200;}
.elIconColor1 { color: #CD0000;}
.elIconColor2 { color: #FFB200;}
.elIconColor3 { color: @color-999999;}
// tooltipBox 给echarts的tooltip添加滚动条----------------------------------------------------------------------------//
.tooltipBox { overflow-y: auto; font-size: 1px; top: -50px !important;}
.tooltipBox::-webkit-scrollbar { width: 5px;}
.tooltipBox::-webkit-scrollbar-track { background-color:@c-fa; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em;}
.tooltipBox::-webkit-scrollbar-thumb { background-color:@cBor-Level2; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em;}
// 带下划线的标题-------------------------------------------------------------------------------------------------//
.borTitle {
  .fontS-Base; .bb(1,@cBor-Level3,solid); .mb(20); height: 30px; position: relative;
  h5 {
    line-height: 30px; .pr(5); color: @cText-Regular; position: absolute; left: 0px; bottom: -1px; z-index: 2; .bb(2,@c-RoutineBlue,solid);
    b { font-weight: bold;}
  }
  .fR { float: right; .pt(3);}
  // 做页签tab效果
  .fL { position: absolute; left: 0px; bottom: -1px; z-index: 1;
    .text { display: inline-block; line-height: 31px; .px(10);}
    .On {.bb(2,@c-RoutineBlue,solid); color: @c-RoutineBlue;}
  }
}
.activeNameTab { width: 100%; .px(20); box-sizing: border-box;
  .H_Tab {float: left; height:34px; line-height: 34px; .px(20); .bg(@color-white100); cursor: pointer; .fontS-Base; color: @color-222222; border: 1px solid #CCCCCC;}
  .H_Tab+.H_Tab { border-left:none;}
  .H_Tab:first-child { border-top-left-radius: 4px;}
  .H_Tab:last-child { border-top-right-radius: 4px;}
  .On { color: @color-white100; .bg(@color-1D70F5); border-color: @color-1D70F5;}
}
// 取消Margin
.mr0Radio { .mr(10) !important;}
.tabsCalss {
  .el-tabs__header { .m(0) !important;
    .el-tabs__item { height: 30px !important; line-height: 30px !important;}
  }
}
.inputLable {
  .el-input-group__prepend { .pl(0) !important; .pr(10) !important; width: 70px; text-align: right;}
}
.collapseWelink {
  .el-collapse-item__content { .pb(16) !important;}
}
.el-progress__text { font-size: 12px !important;}
.el-slider__button-wrapper { width: 26px !important; height: 26px !important;}
.el-slider.is-vertical .el-slider__button-wrapper { left:-10px !important;}
// 业务视图调整-配置窗口用到的
.layoutRadio .el-radio { margin-right: 10px !important; padding-top:5px; height:27px !important; overflow: hidden; box-sizing:border-box;}
.layoutRadio .el-radio__input { float: left; height:22px;}
.layoutRadio .el-radio__label { float: left; height:22px; line-height: 22px;}
.layoutRadio .el-radio__inner { margin-top:4px;}
.perf_item_clear {
  .el-select {
    .el-select__tags {
      .el-tag {
        .el-tag__close { display: none !important;}
      }
    }
  }
}
// 日期
.el-date-editor .el-range-input { width: 43% !important;}
.el-date-editor .el-range__close-icon { width:0px !important;}
.tagsTag { border-style: dashed !important; background:none !important;}
.popoverTags {.pt(7) !important;}
.topDur {
  td {
    color: @color-1D70F5 !important;
  }
}
.numInput .el-input__inner { .p(0) !important; text-align: center;}
.traceCircle { .p(6) !important;}
.tagNobor { border: none !important;}
.el-input--suffix .el-input__inner { padding-right: 0px !important;}
.time-select .el-picker-panel__content { margin-bottom:0px !important;}
// 拓扑图、追踪相关
.topoChart { width: 100%; height:100%; overflow: hidden;  background: url('~@/assets/img/diagramBg.jpg') repeat left top;
  .topo-svg { width: 100%; display: block;}
  .topo-line {
    stroke-linecap: round; stroke-width: 2.5px !important; stroke-dasharray: 13 7; fill: none; animation: topo-dash 1s linear infinite !important;
  }
  .topo-text { fill: @cText-Regular;}
  .topo-line-anchor { cursor: pointer;}
  .topo-tool { display: none;}
  .topo-tool-i {
    cursor: pointer;
    .tool-hexagon {
      fill: @c-dark;
      stroke: @c-blue;
      stroke-width: 2;
      stroke-opacity: 0.5;
    }
    &:hover {
      .tool-hexagon {
        stroke-opacity: 1;
      }
    }
  }
}
@keyframes topo-dash {
  from {
    stroke-dashoffset: 20;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.d3-tip { line-height: 1; .p(8); color: @c-fa; border-radius: 4px; .fontS-ExtraSmall; background:@c-dark;}
.d3-tip.n:after { .mt(-2); top: 100%; left: 0;}
.d3-tip:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  .fontS-ExtraSmall;
  width: 100%;
  line-height: .8;
  color: @c-dark;
  content: "\25BC";
  position: absolute;
  text-align: center;
}
.traceButton { .py(4) !important; .px(5) !important;}
.traceButton+.el-button { .ml(5) !important;}
.trace-list .trace-node+.trace-node rect {
  &:hover { fill: rgba(0, 0, 0, 0.05);}
}
.mb-5 { .mb(5);}
.trace-node .group { cursor: pointer; fill-opacity: 0;}
.trace-node-container { fill: rgba(0, 0, 0, 0); stroke-width: 5px; cursor: pointer;
  &:hover { fill: rgba(0, 0, 0, 0.05); }
}
.trace-node .node-text { .fontS-ExtraSmall; pointer-events: none;}
.trace-node .node-textSegmentId { font-weight: bold; background-color: #ccc;}
.trace-node .node-text-weight { font-family: cursive;}
.tree-link { fill: none; stroke: rgba(0, 0, 0, 0.1); stroke-width: 2px;}
.trace-tree .trace-node rect {
  &:hover { fill: rgba(0, 0, 0, 0.05); }
}
.dialog-c-text { white-space: pre; overflow: auto; font-family: monospace;}
.tabsBox {
  .el-tabs__content { height: calc(100% - 55px);
    .tabsContent { height: 100%; overflow: hidden;}
    .overflowYAuto { overflow: hidden; overflow-y: auto;}
  }
}

// 头部-全局时间特殊样式
.rangeDivColor {
  .el-input__inner { background-color: #14529c; border:none !important; color: @color-white100 !important;}
  .el-range-separator, .el-icon-time { color: @color-white100 !important;}
  .el-icon-time { font-size: 16px !important;}
  .el-range-input { background: none; color: @color-white100 !important;}
}
// 时间空间隐藏清除功能
.elDatePickerUnClear {
  .el-picker-panel__footer {
    .el-button--text { display: none !important;}
  }
}
// 多选下拉框
.elTagSelect {
  .el-select__tags {
    .el-tag:first-child  { max-width: calc(100% - 70px); overflow: hidden;
      .el-select__tags-text { max-width: calc(100% - 20px); overflow: hidden; display:inline-flex;}
    }
  } 
}
// 级联风格调整
.cascaderUiStyle {
  .el-cascader-panel {
    .el-cascader-menu {
      .el-cascader-menu__wrap { .mb(0) !important; height: auto !important; max-height: 250px !important;
        .el-cascader-menu__list.is-empty { min-height: 34px !important;}
      }
    }
  }
  .el-cascader__suggestion-panel {
    .el-scrollbar__wrap { .mb(0) !important;}
  }
}
.messageBoxCustom {
  .el-message-box__message {word-break: break-word;}
}
